<template>
  <div class="gzAccount" style="padding:15px;  background: #fff; box-shadow: 0 0 3px #ccc;">
    <div class="tzButton">
      <el-button type="success" class="bt_button" @click="getDeviceList">生成台账</el-button>
      <el-button v-if="hasRole('account:device:export')"  class="bt_button" type="info" @click="exportTemplate" style="margin-left: 10px">导出</el-button>
    </div>
    <div style="text-align: center;margin-bottom: 10px;font-weight: bold;font-size: 20px;color: #333333;">安徽江淮松芝空调有限公司工艺部工装台账</div>
    <!--<div style="text-align: center;margin-bottom: 10px;font-weight: bold; color: #1296db;font-size: 18px;">南京博士朗新能源科技有限公司</div>-->
    <wh-table :height="'510'" :tableData="tableData" :tableLoading="tableLoading" :tableHeader="tableHeader" :option="option"></wh-table>
    <form action="/autoMonitor/by/exportExcelData" method="post" style="display: none;" ref="downAccountLoadExcel"> 
    	<input name="json" :value="templateExcel.json" /> 
    	<input name="type" value="1" /> 
    	<input name="title" :value="currentImportName" /> 
    </form>
  </div>
</template>
<script>
  import { formatDate } from '@/utils/formatDate'
  import whTable from "../../../components/wh-table/index";
  export default {
    name: 'gzAccount',
    data() {
      return {
        currentImportName: "",
        templateExcel: {
          json: ""
        },
        tableData: [],
        tableHeader: [],
        tableLoading: true,
        queryForm: {
          gqIdList: []
        },
        option: {
          headerCell: {
            background: 'rgb(214, 215, 216)',
            color: 'rgba(0, 0, 0, 0.8)'
          }
        },
      }
    },
    components: {
      whTable
    },
    mounted() {
      this.getDeviceList();
      let date = formatDate(new Date(), "yyyy");
      this.currentImportName = date + "年设备台账";
    },
    methods: {
      exportTemplate() {
        let self = this;
        let headers = {
          tableHeader: this.tableHeader,
          tableData: self.tableData
        };
        self.templateExcel.json = JSON.stringify(headers);
        self.$nextTick(() => {
          self.$refs.downAccountLoadExcel.submit();
        })
      },
      handleDefaultTab(result) {
        let self = this;
        self.tableHeader =  [{"columnName": "assetCode", "coloumNameCn": "资产编码"},
          {"columnName": "deviceCode", "coloumNameCn": "设备编码"},
          {"columnName": "name", "coloumNameCn": "设备名称"},
          {"columnName": "type", "coloumNameCn": "型号规格"},
          {"columnName": "deviceCount", "coloumNameCn": "数量"},
          {"columnName": "producer", "coloumNameCn": "制造商"},
          {"columnName": "price", "coloumNameCn": "价值"},
          {"columnName": "userDate", "coloumNameCn": "投用日期"},
          {"columnName": "deviceStatusCn", "coloumNameCn": "状态"},
          {"columnName": "attr", "coloumNameCn": "属性"},
          {"columnName": "deptName", "coloumNameCn": "使用部门"}];
      },
      getDeviceList() {
        let self = this;
        self.tableLoading = true;
        self.$http({
          url: "/autoMonitor/manage/queryByDeviceList",
          method: "post",
          params: {
            keyword: self.keyword
          }
        }).then(resp => {
          if(resp.success) {
            self.tableLoading = false;
            self.handleDefaultTab();
            self.tableData = resp.result;
          }
        });
      },
    }
  }
</script>
<style>
  .gzAccount .el-tag--small {
    height: 20px;
    padding: 0 4px;
    line-height: 17px;
  }
  .gzAccount .el-input__inner {
    font-size: 11px;
  }
  .gzAccount .el-select__tags-text {
    font-size: 11px;
  }
  .gzAccount .el-select__tags {
    max-width: none !important;
  }
  .aForm .el-button--medium {
    padding: 5px 9px !important;
  }
  .gzAccount .el-date-editor.el-input,
  .userManage .el-date-editor.el-input__inner {
    width: auto;
  }
  .gzAccount .buttonAdd {
    float: right;
    margin-bottom: 10px;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
  }
  .aForm .el-form-item {
    margin-bottom: 0px !important;
  }
  .gzAccount .tzButton .bt_button {
    height: 26px;
    border-radius: 13px;
    font-size: 12px;
    padding: 5px 12px !important;
  }
</style>